<template>
  <view class="dataBoard" v-if="database.length > 0">
    <u-grid :border="false">
      <u-grid-item v-for="(item, index) in database" :key="index">
        <view>{{ item.label }}</view>
        <text class="grid-text">{{ item.value }}</text>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
import { getDataBoard } from "@/service/api/sp-common/databoard";
import { mapState } from "vuex";

export default {
  name: `dataBoard`,
  created() {
    // this.fetchData();
  },
  computed: {
    ...mapState("sp-common/auth", ["token"]),
  },
  data() {
    return {
      database: [
        {
          label: "日增营收(元)",
          value: 0,
        },
        {
          label: "日增成交数",
          value: 0,
        },
        {
          label: "日增会员",
          value: 0,
        },
      ],
    };
  },
  watch: {
    token: {
      handler(val) {
        if (val) {
          this.fetchData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    async fetchData() {
      const res = await getDataBoard();
      this.database = [
        {
          label: "日增营收(元)",
          value: res?.income,
        },
        {
          label: "日增成交数",
          value: res?.num,
        },
        {
          label: "日增会员",
          value: res?.dayAdd,
        },
      ];
    },
  },
};
</script>

<style scoped lang="scss">
.dataBoard {
  width: 678rpx;
  padding: 20rpx 10rpx;
  background-color: white;
  margin: 20rpx auto;
}
.grid-text {
  margin-top: 20rpx;
  font-weight: bold;
  font-size: 32rpx;
}
</style>
